import {ElButton, ElDialog} from "element-plus";

export default defineComponent({
    props: {
        content: {
            type: [String, Function],
            default: ""
        }
    },
    setup(props, {attrs}) {
        const title = ref(attrs.title || "")
        const visible = ref(attrs.visible)
        const width = ref(attrs.width || "30%")
        const showCancelButton = ref(attrs.showCancelButton || false)
        const cancelButtonText = ref(attrs.cancelButtonText || "取消")
        const showConfirmButton = ref(attrs.showConfirmButton === undefined ? true : attrs.showConfirmButton)

        const confirmButtonText = ref(attrs.confirmButtonText || "确定")

        const callback = () => {
            visible.value = false
            attrs.close && attrs.close()
        }

        const cancel = () => {
            if (attrs.onCancel) {
                attrs.onCancel(callback)
            } else {
                callback()
            }
        }

        const confirm = () => {
            if (attrs.onConfirm) {
                attrs.onConfirm(callback)
            } else {
                callback()
            }
        }

        const scopedSlots = {
            default: () => typeof props.content === 'string' ? props.content : props.content?.(),
            footer: () => (
                <>
                    {showCancelButton.value && (
                        <ElButton onClick={cancel}>
                            {cancelButtonText.value}
                        </ElButton>
                    )}
                    {showConfirmButton.value && (
                        <ElButton type="primary" onClick={confirm}>
                            {confirmButtonText.value}
                        </ElButton>
                    )}
                </>
            )
        }

        return () => <ElDialog title={title.value} width={width.value} v-model={visible.value} v-slots={scopedSlots}/>
    }
})
